<!-- 首页 -->
<template>
	<view class="content" style="background-color: #F5F5F9;">
		<view class="padding-left padding-right padding-bottom">
			<!-- <add-tip :tip="tip" :duration="duration" /> -->
			<view class="label padding-top">{{homeData.label}}</view>
			<view class="padding-top">
				<tn-subsection :list="homeData.subsectionList" mode="button" :height="100" :fontSize="35"
					:borderRadius="15" backgroundColor="#FFFFFF" inactiveColor="#000000" @change="subsectionChange"
					button-color="RGB(63,86,254)" />
			</view>

			<view v-show="tabIndex === 0">
				<view class="label padding-top-xl">
					{{homeData.year + '年'}}
				</view>

				<view class="skill-sequence-panel-content-wrapper margin-top-sm" style="margin-left: 1%;"
					v-if="homeData.monthResList.length > 0">
					<!--左边虚化-->
					<!-- <view class="hide-content-box hide-content-box-left"></view> -->
					<!--右边虚化-->
					<view class="hide-content-box hide-content-box-right"></view>
					<scroll-view scroll-x="true" class="kite-classify-scroll">
						<view class="kite-classify-cell" v-for="(month, index) in homeData.monthResList" :key="index"
							@click="clickCard(index)">
							<view :class="[month.isAutograph?'card':'']"
								:style="{backgroundColor:month.backgroundColor,color:month.color}">
								<view class="nav-li bg-index">
									<view class="nav-name">{{ month.month + '月'}}</view>
									<view class="nav-content padding-top-xs" :style="{color: month.contentColor}">
										{{ month.wages }}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>


				<view v-else>
					<tn-empty mode="search" text="暂无工资数据"></tn-empty>
				</view>
			</view>


			<view v-show="tabIndex === 1">
				<view class="margin-top-lg" style="background-color: #fff;border-radius: 20upx;">
					<view style="width: 100%;" class="flex align-center padding-left padding-top">
						<view style="font-size: 32upx;color: #8f8f8f;">
							{{homeData.year+'年'+selectedMonth+'月 实发工资：'}}
						</view>
						<view style="color: black;font-size: 35upx;font-weight: bold;">
							{{detailObj.salarySlipRespVO.total}}
						</view>
					</view>
					<view class="charts-box padding-top-xs">
						<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
					</view>
				</view>
			</view>
			<view class="padding-top label">
				{{selectedMonth + '月工资明细'}}
			</view>
		</view>
		<view class="detail padding-top margin-left-sm margin-right-sm">
			<view class="flex justify-center">
				<view class="detail-receipt">
					<view class="flex align-center padding-left">
						<!-- 最左边的图标 -->
						<view class="padding-right-sm">
							<image src="/static/index/Lightbox.png" style="height: 90upx;width: 90upx;"></image>
						</view>
						<view>
							<view style="=font-size: 50upx;" class="padding-bottom-xs">{{'实发工资(含保险,个税)'}}</view>
							<view>
								<tn-count-to :fontSize="45" :endVal="Number.parseInt(selectWages)" :decimals="2" />
							</view>
						</view>
					</view>
					<view class="flex align-center padding-right">
						<view>
							<tn-button backgroundColor="RGB(63,86,254)" fontColor="#fff" :disabled="isAutograph"
								@click="qianshou">{{isAutograph?'已签收':'签收'}}</tn-button>
						</view>
					</view>
				</view>
			</view>
			<view class="padding-left-lg padding-top-lg" style="width: 93%;">
				<view style="font-size: larger;font-weight: 600;">{{'工资组成 '}}</view>
				<view class="padding-top-sm">
				<my-tree :node="detailArr"/>
					<view class="flex justify-between padding-bottom-lg">
						<view class="detail-label">工资总额</view>
						<view calss="detail-number">{{selectWages}}</view>
					</view>
				</view>
			</view>

		</view>
		<view class="padding-bottom"></view>

	</view>
</template>

<script>
	// import request from '@/common/request.js';
	import addTip from '../../../components/wxcomponents/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';
	import myTree from './myTree.vue';
	import {
		parseTime
	} from '@/utils/common.js'
	import {
		showConfirm
	} from '@/utils/common'
	import store from '@/store'
	import {
		home,
		detail,
		autograph,
		charts,
		isAutograph
	} from '@/api/home'
	export default {
		components: {
			addTip,
			myTree
		},
		data() {
			return {
				rankTypeIndex: 0,
				barFalse: false,
				homeData: {
					label: 'HI, 早上好',
					subsectionList: ['月度', '趋势'],
					year: 2024,
					monthResList: []
				},
				selectedMonth: 1,
				selectWages: 0,
				detailArr: [],
				detailObj: {
					salarySlipRespVO: {
						employeeName: '',
						phone: '',
						deptId: '',
						deptName: '',
						post: '',
						basicSalary: 0,
						bonus: '',
						deductions: ''
					},
					recordRespVO: {
						name: '',
						post: '',
						township: 0,
						city: 0,
						security: 0,
						maintain: 0,
						broadbandInstallation: 0,
						singleDevice: 0,
						oneDragOne: 0,
						oneDragTwo: 0,
						oneDragThree: 0,
						oneDragFour: 0,
						indoor: 0,
						outdoor: 0,
						networkingRouter: 0,
						iptv: 0,
						relocation: 0,
						networkAccess: 0,
						salaryPerOccurrence: 0
					},
					assessmentRespVO: {
						indicator: 0,
						safety: 0,
						training: 0,
						reward: 0,
						other: 0,
						custom1: 0,
						custom2: 0,
						custom3: 0,
						custom4: 0,
						custom5: 0
					}
				},
				recordConfigObj: {
					township: 0,
					city: 0,
					security: 0,
					broadbandInstallation: 0,
					singleDevice: 0,
					oneDragOne: 0,
					oneDragTwo: 0,
					oneDragThree: 0,
					oneDragFour: 0,
					indoor: 0,
					outdoor: 0,
					networkingRouter: 0,
					iptv: 0,
					relocation: 0,
					networkAccess: 0,
				},
				tabIndex: 0,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					enableScroll: true,
					padding: [15, 10, 0, 15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						}
					}
				},
				isAutograph: false,
			}
		},
		watch: {},
		onReady() {
			// charts().then(res => {
			// 	this.chartData = JSON.parse(JSON.stringify(res.data))
			// })
			// wx.login()
			home().then(res => {
				this.homeData = res.data

			})
			// let data = parseTime(new Date(),'{y}-{m}')
			// detail(data).then(res => {
			// 	this.detailObj = res.data
			// })
		},
		onUnload() {
			// 这里可以执行你需要的操作
			// this.$tab.reLaunch("/pages/login/login")
			// 返回 true 表示阻止默认的返回行为，false 表示不阻止
		},
		mounted() {},
		computed: {
			overallState() {
				return this.$store.getters.overallState
			}
		},
		methods: {
			parseTime,
			autograph,
			home,
			detail,
			charts,
			isAutograph,
			toLogin() {
				this.$tab.reLaunch("/pages/login/login")
			},
			goProjectList() {
				uni.navigateTo({
					url: '../project/list'
				});
			},
			clickCard(index) {
				this.homeData.monthResList.forEach((item, idx) => {
					if (idx === index) {
						item.color = 'white'
						item.contentColor = 'white'
						item.backgroundColor = 'RGB(63,86,254)'
					} else {
						item.color = 'black'
						item.contentColor = '#ADADAD'
						item.backgroundColor = 'white'
					}
				})
				let obj = this.homeData.monthResList[index]
				this.selectedMonth = obj.month
				this.selectWages = obj.wages
				console.log('this.selectedMonth===',obj)
				let that = this
				detail(obj.month).then(res => {
					that.detailArr = res.data
					console.log(that.detailArr)
				})
				isAutograph(obj.month).then(res => {
					that.isAutograph = res.data
				})
				
			},
			qianshou() {
				this.autograph(this.selectedMonth).then(res => {
					uni.showToast({
						title: '签收成功!',
						duration: 2000,
						mask: true,
						image: '/static/index/success.png',
						icon: 'none'
					});
					this.isAutograph = true
					let month = this.selectedMonth
					this.homeData.monthResList.forEach(item => {
						if (item.month === month) {
							item.isAutograph = true
						}
					})
				})
			},
			subsectionChange(obj) {
				this.tabIndex = obj.index
				let that = this
				if (obj.index === 1) {
					charts().then(res => {
						this.chartData = JSON.parse(JSON.stringify(res.data))
						console.log(JSON.parse(JSON.stringify(res.data)))
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.label {
		font-size: 40upx;
		font-weight: 550;
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 10rpx 10rpx 10rpx;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		width: 100%;
		height: 180rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.kite-classify-cell {
		display: inline-block;
		width: 180rpx;
		margin-right: 20rpx;
		background-color: #fffff;
		border-radius: 11rpx;
		overflow: hidden;
	}


	.nav-li {
		padding: 10rpx 10rpx 25rpx 10rpx;
		width: 100%;
		position: relative;
		z-index: 1;
		text-align: center;
	}

	.nav-name {
		font-size: 32upx;
		margin-top: 20upx;
		position: relative;
	}


	.nav-content {
		color: #f3f3f3;
		font-size: 14upx;
	}

	.card {
		position: relative;

		&:after {
			content: '√';
			font-size: 20upx;
			font-weight: bold;
			text-align: center;
			position: absolute;
			color: white;
			top: 0;
			right: 0;
			width: 27upx;
			/* 对勾宽度 */
			height: 27upx;
			/* 对勾高度 */
			background-color: #15E0C1;
			/* 对勾颜色 */
			/* 创建对勾形状 */
			z-index: 999;

		}
	}

	.detail {
		background-color: #fff;
		border-radius: 20upx;
	}

	.detail-receipt {
		width: 94%;
		height: 130upx;
		display: flex;
		border-radius: 20upx;
		justify-content: space-between;
		background-color: #F5F5F9;
	}

	.detail-title {
		font-weight: bold;
		font-size: 30upx;
		color: #1890FF;
	}

	.detail-label {
		font-size: 30upx;
		color: #757576;
	}

	.detail-number {
		font-size: 36upx;
		color: black;
		font-weight: 700;
	}

	.detail-unit-price {
		padding-left: 20upx;
		color: #2abdb8;
	}

	.divider {
		margin-top: 20upx;
		margin-bottom: 20upx;
		border-top: 1px solid #dbdbdc;
		width: 100%;
	}

	.charts-box {
		width: 100%;
		height: 320upx;
		z-index: 999;
	}
</style>